<template>
    <div class="import-dialog">
        <el-dialog
            :title="title"
            :visible.sync="dialog"
            :close-on-click-modal="false"
            width="590px"
            @close="close"
        >
            <div class="dialog-body">
                <div class="box">
                    <span class="label">学生信息：</span>
                    <el-button class="upload-file" type="primary" icon="el-icon-upload2">
                        点击上传
                        <input class="file-btn" ref="referenceUpload" type="file" accept=".xls" @change="uploadFile">
                    </el-button>
                    <span class="download" @click="downLoad">{{ fileName }} <i class="el-icon-download"></i></span>
                </div>
                <div class="tips">
                    提示：请先下载模板，再上传，仅支持xls格式。
                </div>
                <div
                    class="file"
                    v-show="fileText"
                >
                    <span class="item"
                        :alt="fileText"
                        :title="fileText"
                    >
                        {{ fileText.length > 20 ? fileText.slice(0, 20) + '...'  : fileText }}
                        <i
                            class="el-icon-delete"
                            @click="remove"
                        ></i>
                    </span>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    class="btn-hover"
                    size="small"
                    @click="sub"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="showType"
            width="590px"
        >
            <div class="success-dialog-body">
                <div class="success-tips">
                    <i class="iconfont icon-chenggong"></i>
                </div>
                <p class="info">提交成功，您上传的学生成绩人数为{{ studentNum }}</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    class="btn-hover"
                    size="small"
                    @click="hide"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>

        <uploadFile
            ref="uploadFile"
        />
    </div>
</template>

<script>
import { uploadStudentExcel, downLoadStudentExcel, downLoadAllData, downLoadData, importAllScore, importScore } from '../../../../../api/courseReach';
import uploadFile from './uploadFail';
import { downLoadFile } from '../../../../../utils/common';
export default {
    components: {
        uploadFile
    },
    data() {
        return {
            cid: null,
            loading: false,
            title: '',
            dialog: false,
            file: '',
            fileName: '',
            fileText: '',
            type: null,
            checkId: null,
            showType: false,
            studentNum: '',
            checkName: ''
        };
    },
    methods: {
        init(type, info, obj) {

            this.type = type;
            this.cid = info;

            if (type == 1) {

                this.title = 'Excel导入';
                this.fileName = '学生信息模板.xls';
            } else if(type == 2) {
                this.title = '批量导入成绩';
                this.fileName = '批量学生成绩模板/数据.xls';
            } else {
                const { checkId, checkName } = obj;
                this.checkId = checkId;
                this.title = '导入成绩';
                this.fileName = '学生成绩模板/数据.xls';
                this.checkName = obj.checkName;
            }

            this.dialog = true;
        },
        downLoad() {
            const mimeType = 'application/vnd.ms-excel';
            const data = {};
            let fn = null;
            if (this.type == 1) {
                data.tempCode = 'CONCLUDE_STU_TEMP';
                fn = downLoadStudentExcel(data);
            }

            if (this.type == 2) {
                data.concludeId = this.cid;
                fn = downLoadAllData(data);
            }

            if (this.type == 3) {
                data.concludeId = this.cid;
                data.checkId = this.checkId;
                fn = downLoadData(data);
            }

            fn.then(async (res) => {
                if (res.type == mimeType || this.type == 1) {
                    const name = this.type == 3 ? `${this.checkName}-${this.fileName}` : this.fileName;
                    downLoadFile(new Blob([res]), name, mimeType);
                } else {
                    const { message } = JSON.parse(await (new Response(res)).text());
                    this.$message.error(message);
                }
            });
        },
        uploadFile(e) {
            const file = e.target.files[0];

            if (/\.xls$/.test(file.name)) {
                this.fileText = file.name;
                this.file = file;
            } else {
                this.$message.error('请先下载模板，再上传，仅支持xls格式');
            }
        },

        uploadFnAjax(file) {
            const data = new FormData();
            data.append('file', file);
            data.append('concludeId', this.cid);
            if (this.type == 1) {
                uploadStudentExcel(data).then((res) => {
                    this.$message.success('上传成功');
                    this.$emit('refresh');
                    this.remove();
                    this.loading = false;
                    this.dialog = false;
                }).catch(() => {
                    this.loading = false;
                });
            }

            if (this.type == 2) {
                importAllScore(data).then((res) => {
                    this.reset(res.data);
                }).catch((err) => {
                    const { code, data } = err;

                    this.loading = false;

                    if (code == 700012) {
                        this.remove();
                        this.$refs.uploadFile.init(data);
                    }
                });
            }

            if (this.type == 3) {
                data.append('checkId', this.checkId);
                importScore(data).then((res) => {
                    this.reset(res.data);
                }).catch((err) => {
                    const { code, data } = err;

                    this.loading = false;

                    if (code == 700012) {
                        this.remove();
                        this.$refs.uploadFile.init(data);
                    }
                });
            }
        },

        remove() {
            this.file = null;
            this.$refs.referenceUpload.value = null;
            this.fileText = '';
        },

        sub() {
            if (this.file) {
                this.loading = true;
                this.uploadFnAjax(this.file);
            } else {
                this.$message.error('请上传文件');
            }

        },

        hide() {
            this.showType = false;
        },

        reset(data) {
            this.studentNum = data;
            this.dialog = false;
            this.showType = true;
            this.remove();
            this.loading = false;
            this.$emit('refresh');
        },

        close() {
            this.file = null;
            this.$refs.referenceUpload.value = null;
            this.fileText = '';
            this.loading = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.import-dialog {
    .download {
        color: #1277EB;
        margin-left: 16px;
        font-weight: 400;
        cursor: pointer;
        vertical-align: middle;
    }

    .dialog-body {
        padding: 30px 0 14px 49px;
    }

    .label {
        color: #474747;
        font-size: 14px;
        font-weight: 400;
    }

    .tips {
        margin-top: 14px;
        font-size: 14px;
        color: #ADADAD;
        font-weight: 400;
        padding-left: 75px;
    }

    .file {
        margin-top: 20px;
        padding-left: 75px;
        color: #474747;
        font-weight: 400;
        .el-icon-delete {
            color: #385899;
            font-weight: bold;
            cursor: pointer;
        }
    }

    .upload-file {
        position: relative;
        .file-btn {
            opacity: 0;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
    }

    .dialog-footer {
        text-align: center;
        padding-bottom: 21px;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }

    .success-dialog-body {
        padding: 18px 0 0 0;
    }

    .success-tips {
        text-align: center;
        color: #68c23b;
        .icon-chenggong {
            font-size: 52px;
        }
    }

    .info {
        margin-top: 30px;
        text-align: center;
        color: #727272;
        font-weight: 400;
        font-size: 16px;
    }
}
</style>
